<!--退费查询-->
<template>
    <div>
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">

            <el-form-item label="患者姓名" prop="patientName">
                <el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable size="small" style="width:240px" />
            </el-form-item>

            <el-form-item label="挂号单号" prop="regId">
                <el-input v-model="queryParams.regId" placeholder="请输入挂号单号" clearable size="small" style="width:240px" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="initUser">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="makeZero">重置</el-button>
            </el-form-item>

        </el-form>
        <!-- 查询条件结束 -->

        <!-- 数据表格开始 -->
        <el-table  border :data="orderList" >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="退费订单号" align="center" prop="backId" width="220" />
            <el-table-column label="挂号单号" align="center" prop="regId" width="200"      />
            <el-table-column label="患者姓名" align="center" prop="patientName" />
            <el-table-column label="总金额" align="center" prop="backAmount" />
            <el-table-column label="退费类型" align="center" prop="backType" :formatter="payTypeFormat" />
            <el-table-column label="订单状态" align="center" prop="backStatus" :formatter="orderStatusFormat" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="200" />
            <el-table-column label="操作" align="center" width="280">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view" size="mini" @click="handleClick(scope.row)" >查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <!--查看详情的弹出框开始-->
        <el-dialog :title="`查询【${gridDataName}】支付订单详情`" :visible.sync="dialogTableVisible" width="70%" style="text-align: center" >
            <el-table :data="gridData" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" >
                                <el-table-column label="详情ID" align="center" prop="itemId" width="220" />
                                <el-table-column label="处方ID" align="center" prop="coId" width="200"      />
                                <el-table-column label="名称" align="center" prop="itemName" />
                                <el-table-column label="价格" align="center" prop="itemPrice" />
                                <el-table-column label="数量" align="center" prop="itemNum" />
                                <el-table-column label="小计" align="center" prop="itemAmount" />
                                <el-table-column label="类型" align="center" prop="itemType" />
                                <el-table-column label="状态" align="center" prop="status" :formatter="payTypeFormatyf" />
            </el-table>
            <el-button @click="turnOffTheDialog()" style="display:block;margin:0 auto;margin-top: 30px" >关闭</el-button>
        </el-dialog>
        <!--查看详情的弹出框结束-->


        <!-- 分页控件开始 -->
        <el-pagination
                v-show="page.total>0"
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->

    </div>
</template>

<script>
    export default {
        name: "Backfeelist",
        data(){
            return{
                //表格循环数组
                orderList:[],
                //条件查询参数
                queryParams:{},
                //分页
                page:{
                    total:0,
                    current:1,
                    size:5,
                },

            /*数据-查看详情-开始*/
                //查看详情的数据
                gridData:[],
                //查看详情弹出层的标题的名字
                gridDataName:"",
                //查看详情弹出层的开关
                dialogTableVisible: false,
            /*数据-查看详情-结束*/

            /*数据-01替换文字-开始*/
                //支付类型数组
                payTypeArr:[],
                //订单状态数组
                orderStatusArr:[],
                //药方支付类型数组
                payTypeArray:[],
            /*数据-01替换文字-结束*/

            }
        },
        created() {
            this.initUser();
            //初始化支付类型转文字
            this.initPayType();
            //初始化订单状态转文字
            this.initOrderStatus();
            //初始化药方支付类型转文字
            this.initPayTypeyf();
        },
        methods:{
            initUser(){  //初始化表格中用户信息
                this.$http.post("/charge/api/moneyout/selectAll/"+this.page.current+"/"+this.page.size,this.queryParams).then(result=>{
                    console.log(result);
                    this.orderList = result.data.data.records;
                    this.page.total = result.data.data.total;
                })
            },

        /*方法-药方支付类型-开始*/
            //支付类型发送请求
            initPayTypeyf(){
                this.$http.get("/system/api/dict/data/findByType/his_order_details_status").then(result=>{
                    this.payTypeArray = result.data.data;
                })
            },
            //支付类型字典解析
            payTypeFormatyf(row){
                let v = row.status;
                return this.formatDict2(this.payTypeArray,v);
            },
        /*方法-药方支付类型-结束*/

        /*修改-退费类型-开始*/
            //支付类型发送请求
            initPayType(){
                this.$http.get("/system/api/dict/data/findByType/his_pay_type_status").then(result=>{
                    this.payTypeArr = result.data.data;
                })
            },
            //支付类型字典解析
            payTypeFormat(row){
                let v = row.backType;
                return this.formatDict2(this.payTypeArr,v);
            },
        /*修改-退费类型-结束*/

        /*修改-订单状态-开始*/
            //订单状态发送请求
            initOrderStatus(){
                this.$http.get("/system/api/dict/data/findByType/his_backfee_status").then(result=>{
                    this.orderStatusArr = result.data.data;
                })
            },
            //订单状态字典解析
            orderStatusFormat(row){
                let v = row.backStatus;
                return this.formatDict2(this.orderStatusArr,v);
            },
        /*修改-订单状态-结束*/

        /*方法-查看详情-开始*/
            //查看详情绑定的事件-viewDetails
            handleClick(row) {
                this.dialogTableVisible=true;
                this.$http.get("/charge/api/moneyout/selectOneByOrderId?backId="+row.backId).then(result=>{
                    this.gridData = result.data.data;
                    this.gridDataName=row.patientName;
                })
            },
            //关闭查看详情弹出层的关闭按钮绑定的事件
            turnOffTheDialog(){
                this.dialogTableVisible=false;
            },
        /*方法-查看详情-结束*/

            //重置按钮
            makeZero(){
                this.queryParams={};
                this.initUser();
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                // this.page.pageSize = val
                this.page.size = val
                // 重新查询
                this.initUser()
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                // this.page.currentPage = val
                this.page.current = val
                // 重新查询
                this.initUser()
            },

        }


    }
</script>

<style scoped>

</style>
